import { useState, useEffect } from 'react';

const useWindowWidth = () => {
  const [windowWidth, setWindowWidth] = useState<number>(window.innerWidth);
  const [isPc, setIsPc] = useState<boolean>(window.innerWidth > 880);

  const isMobileSafari = () => {
    const userAgent = window.navigator.userAgent;
    const isMobileSafariFlag =
      /iP(hone|ad|od)/.test(userAgent) &&
      /Safari/.test(userAgent) &&
      !/CriOS|FxiOS|OPiOS|mercury|EdgiOS|GSA/.test(userAgent);
    return isMobileSafariFlag;
  };

  useEffect(() => {
    const handleWindowResize = () => {
      const newWidth = window.innerWidth;
      const newHeight = window.innerHeight;
      setWindowWidth(newWidth);
      setIsPc(newWidth > 880 && newWidth >= newHeight);
    };

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  }, []);

  return { windowWidth, isPc, isMobileSafari: isMobileSafari() };
};

export default useWindowWidth;